<template>
  <div class="login-page">
    <div class="homepage-hero-module">
      <div class="video-container">
        <div :style="fixStyle" class="filter">
          <!--内容-->
        </div>
        <img src="@/assets/tupian.jpg" style="width:1000vw" alt="">
        <video :style="fixStyle" autoplay loop muted class="fillWidth">
          <source src="@/assets/vidio/wuliu.mp4" type="video/mp4">
          <!-- 浏览器不支持 video 标签，建议升级浏览器。 -->

        </video>

      </div>
    </div>
    <el-card>
      <template #header>
        <h1>
          <img src="@/assets/logo1.png" alt="" style="margin-top:20px">
        </h1>
      </template>
      <el-form ref="Form" autocomplete="off" :rules="rules" :model="formData" class="form1" style="margin-top:80px">
        <el-form-item prop="account">
          <el-input v-model="formData.account" placeholder="输入用户名" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="formData.password" type="password" placeholder="输入用户密码" />
        </el-form-item>
        <el-form-item prop="code">
          <input v-model="formData.code" type="text" autocomplete="off" placeholder="验证码" name="code" class="el-input__inner">
          <img class="code" :src="codeImg" alt="" @click="onCode">
        </el-form-item>
        <el-form-item class="tc">
          <el-button type="danger" style="width: 100%;" @click="onsubmit">登 录</el-button>
          <span style="font-size: 12px; color: red;">仅用于IT培训教学使用,为保障您的个人信息安全，请勿向平台录入任何个人敏感信息（如手机号、身份证号等）！</span>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { captchaAPI } from '@/api/user'
// import { mapActions } from 'vuex'
// import { mapActions } from 'vuex'

export default {
  name: 'Login',
  codeImg: '',
  data() {
    return {
      codeImg: null,
      formData: {
        account: 'shenlingadmin',
        password: '123456',
        code: ''

      },
      urlKey: '1234',
      oldKey: '',
      rules: {
        account: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 3 到 16个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }

        ]
      },
      name: 'Video',
      vedioCanPlay: false,
      fixStyle: ''

    }
  },
  watch: {
    // 监听urlKey的数据变化
    urlKey(newValue, oldValue) {
      // 赋值新key作为参数发请求
      this.oldKey = oldValue
    }
  },
  mounted: function() { // 屏幕自适应
    window.onresize = () => {
      const windowWidth = document.body.clientWidth
      const windowHeight = document.body.clientHeight
      const windowAspectRatio = windowHeight / windowWidth
      let videoWidth
      let videoHeight
      if (windowAspectRatio < 0.5625) {
        videoWidth = windowWidth
        videoHeight = videoWidth * 0.5625
        this.fixStyle = {
          height: windowWidth * 0.5625 + 'px',
          width: windowWidth + 'px',
          'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
          'margin-left': 'initial'
        }
      } else {
        videoHeight = windowHeight
        videoWidth = videoHeight / 0.5625
        this.fixStyle = {
          height: windowHeight + 'px',
          width: windowHeight / 0.5625 + 'px',
          'margin-left': (windowWidth - videoWidth) / 2 + 'px',
          'margin-bottom': 'initial'
        }
      }
    }
    window.onresize()
  },
  created() {
    this.onload()
  },
  methods: {
    // ...mapActions('user', ['login']),

    // 登录
    onsubmit() {
      this.$refs.Form.validate()
      // this.login({ ...this.formData, key: this.oldKey })
      // 数据传参
      this.$store.dispatch('user/login', { ...this.formData, key: this.oldKey })
    },
    // 传默认key1234,获取验证码
    async onload() {
      const res = await captchaAPI(this.urlKey)
      // 将文件流数据转成路径
      this.codeImg = URL.createObjectURL(res.data)
      // 赋值key给urlKey
      this.urlKey = res.data.size
    },

    // // 视频函数
    // canplay() {
    //   this.vedioCanPlay = true
    // },
    // 点击重新获取code
    onCode() {
      this.onload()
    }
  }

}
</script>

<style lang="scss" scoped>
.code{
position: relative;
width: 71px;
height: 32px;
top: -38px;
left: 280px;

}
.homepage-hero-module,
 .video-container {
 position: relative;
 height: 100vh;
 overflow: hidden;
 }

 .video-container .poster img{
 z-index: 0;
 position: absolute;
 }

 .video-container .filter {
 z-index: 1;
 position: absolute;
 background: rgba(0, 0, 0, 0.4);
 width: 100%;
 }

 .fillWidth {
 width: 100%;
 }
img{
  width: 195px;
  height: 54px;
position: relative;
bottom: 30px;
}
.login-page {
  position: relative;
  min-height: 100vh;
  /* background: url(@/assets/login-bg.svg) no-repeat center / cover; */
  display: flex;
  align-items: center;
  justify-content: center;

  .el-card {

    z-index: 1;
    position: absolute;
      transform: translate(-50%);
      left: 50%;
      width: 438px;
    height: 528px;

    ::v-deep .el-card__header{
      height: 10px;
      line-height: 10px;
      border-bottom:0px;
      text-align: center;
      color: #fff;
      font-size: 18px;
    }
  }
  .el-form {
    padding: 0 20px;
  }
  .tc {
    text-align: center;
  }
}
</style>
